<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云音乐</title>
  <!-- 
  在Node.js中，跨域问题通常指的是浏览器的同源策略限制了不同源之间的请求。为了解决跨域问题，有多种方案可以使用。
  1. 什么是跨域？
  跨域是指在一个网站的脚本试图访问另一个网站的资源时，由于浏览器的安全策略（同源策略），会被阻止。具体来说，同源策略限制了不同协议、域名或端口之间的交互。

  2. 常见的跨域解决方案
   1. CORS（跨域资源共享）
  CORS是最常用的解决跨域问题的标准机制。通过设置HTTP头部，服务器可以允许特定的源访问资源。
  - 安装CORS中间件：
  npm install cors
  - 使用CORS中间件：
  const express = require('express');
    const cors = require('cors');

    const app = express();
    
    app.use(cors()); // 允许所有源

    // 或者可以配置特定的源
    app.use(cors({
        origin: 'http://example.com'
    }));

    app.get('/data', (req, res) => {
        res.json({ message: 'This is CORS-enabled for a single origin.' });
    });

    app.listen(3000, () => {
        console.log('Server is running on http://localhost:3000');
    });
   2. JSONP（JSON with Padding）
  JSONP是一种通过 `<script>` 标签来实现跨域请求的技术。它的原理是利用 `<script>` 标签不受同源策略限制的特性。

  - 使用JSONP：
  app.get('/jsonp', (req, res) => {
        const callback = req.query.callback;
        const data = { message: 'Hello from JSONP' };
        res.send(`${callback}(${JSON.stringify(data)})`);
    });
  - 客户端请求：
  <script>
        function handleResponse(data) {
            console.log(data.message);
        }

        const script = document.createElement('script');
        script.src = 'http://localhost:3000/jsonp?callback=handleResponse';
        document.body.appendChild(script);
    </script>
   3. 代理服务器
  通过设置代理服务器，将请求转发至目标服务器。这样，浏览器只与同源的代理服务器交互。

  - 使用http-proxy-middleware：
  npm install http-proxy-middleware
  - 设置代理：
  const { createProxyMiddleware } = require('http-proxy-middleware');

    app.use('/api', createProxyMiddleware({
        target: 'http://example.com',
        changeOrigin: true,
    }));
   4. WebSocket
  WebSocket协议允许跨域通信，适用于需要实时双向通信的场景。

  3. 注意事项
  - 安全性: 在使用CORS时，要小心设置允许的源，避免安全风险。
  - 浏览器支持: JSONP只支持GET请求，且大多数现代浏览器支持CORS，建议优先使用CORS。
  - 性能: 代理服务器可能会增加延迟，因此要根据实际情况选择合适的解决方案。
  -->
</head>

<body>
  <h1>网易云音乐项目</h1>

  <script>
    // 1.XHR网络请求
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        console.log(JSON.parse(xhr.responseText))
      }
    }
    xhr.open('get', 'http://localhost:9000/api/users/list')
    xhr.send()


    // 2.fetch网络请求
    fetch('http://localhost:9000/api/users/list').then(async res => {
      const result = await res.json()
      console.log(result)
    })
  </script>
</body>

</html>